<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="addDom()">添加</button>

    <div id="app"></div>

    <script>
      let app = document.querySelector("#app");
      let words = ["我", "是", "一", "个", "人", "<br/>"];
      let index = 0;
      function addDom() {
        // app.innerHTML = app.innerHTML + "<h1>我是标题</h1>";
        // app.innerHTML += words[index++];
        // if (index == words.length) {
        //   index = 0;
        // }

        // 在某个元素中创建一个新的元素 元素.append(新元素) 新元素会被添加到元素的最后
        // 新元素可以使用 document.createElement(标签名) 来创建 也可以使用 元素.cloneNode(true) 来克隆

        // 创建了一个 h1 元素
        let h1 = document.createElement("h1");

        h1.classList.add("title");
        h1.style.color = "red";
        h1.innerText = "我是标题";

        app.append(h1);

        // 移除元素 元素.remove()
        // app.remove();
        // 移除 app 元素中的 h1 元素
        app.removeChild(h1);
      }
    </script>
  </body>
</html>
